<template>
  <chart-card :extraType="'drop'" :title="'充电时段'" @changeDate="changeDate">
    <span slot="titleContent">
      <a-tooltip>
        <template slot="title">
          <div>高峰时段：8:00 - 23:00</div>
          <div>平时段： 7:00-8:00 11:00-18:00</div>
          <div>低谷时段：23:00-7:00</div>
        </template>
        <a-icon type="question-circle" theme="filled" />
      </a-tooltip>
    </span>
    <Charts
      :chartData="pieData"
      :chartType="'chargeTimes'"
      class="echartsMap"
    />
  </chart-card>
</template>

<script>
import Charts from "../charts/Charts";
import { ChartCard } from "./components";
import { getChargingTimes } from "@/services/home";
export default {
  name: "ChargingTimes",
  data() {
    return {
      pieData: {
        list: [
          {
            value: 1048,
            name: "高峰时段充电时长"
          },
          {
            value: 735,
            name: "平时段充电时长"
          },
          {
            value: 580,
            name: "低估时段充电时长"
          }
        ]
      }
    };
  },
  mounted() {
    // this.getPieData();
  },
  components: {
    Charts,
    ChartCard
  },
  props: {
    title: String,
    loading: Boolean,
    type: String
  },
  methods: {
    changeDate(val) {
      console.log(val);
    },
    async getPieData() {
      const {
        data: { data, code }
      } = await getChargingTimes();
      if (code === 200) {
        this.pieData = data;
      }
    }
  }
};
</script>

<style scoped lang="less">
.echartsMap {
  width: 100%;
  height: 120px;
}
</style>
